
import React, { useState } from 'react'
import { Layout, Menu, theme } from 'antd'
import {
  PieChartOutlined,
  UserOutlined,
  TeamOutlined,
  FileOutlined
} from '@ant-design/icons'
import type { MenuProps } from 'antd'
import styles from '../styles/SideMenu.module.scss'

const { Sider } = Layout

type MenuItem = Required<MenuProps>['items'][number]

function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[]
): MenuItem {
  return { key, icon, children, label } as MenuItem
}

const items: MenuItem[] = [
  getItem('Dashboard', '1', <PieChartOutlined />),
  getItem('用户管理', 'sub1', <UserOutlined />, [
    getItem('用户列表', '2'),
    getItem('权限设置', '3')
  ]),
  getItem('团队管理', 'sub2', <TeamOutlined />, [
    getItem('团队列表', '4'),
    getItem('成员管理', '5')
  ]),
  getItem('文档中心', '9', <FileOutlined />)
]

export default function SiderMenu() {
  const [collapsed, setCollapsed] = useState(false)
  const {
    token: { colorBgContainer }
  } = theme.useToken()

  return (
    <Sider
      collapsible
      collapsed={collapsed}
      onCollapse={(value) => setCollapsed(value)}
      width={240}
      style={{ background: colorBgContainer }}
      className={styles.sider}
    >
      <div className={styles.logo}>LOGO</div>
      <Menu
        theme="light"
        defaultSelectedKeys={['1']}
        mode="inline"
        items={items}
        className={styles.menu}
      />
    </Sider>
  )
}
